<script setup lang="ts">
const showMenu = ref(false)
const toggleMenu = () => {
    showMenu.value = !showMenu.value
}
</script>

<template>
    <div class="bg-black/60 w-full fixed top-0 left-0 right-0 py-5 px-20 z-50">
        <div class="">
            <div class="flex items-center justify-between">
                <div class="w-[120px]">
                    <a href="/">
                        <img src="~/assets/images/logo.png" alt="logo" >
                    </a>
                </div>
                <div>
                    <div @click="toggleMenu()" class="flex items-center text-white cursor-pointer select-none">
                        <div class="text-xl mr-4">导航</div>

                        <div>
                            <div class="relative inline-block w-8 h-6">
                                <span class="absolute top-0 transition-all w-full h-0.5 bg-white duration-300" :class="showMenu?' -rotate-45 origin-right':''"></span>
                                <span class="absolute top-1/2 transition-all w-full h-0.5 bg-white" :class="showMenu?' opacity-0':''"></span>
                                <span class="absolute bottom-0 transition-all w-full h-0.5 bg-white duration-300" :class="showMenu?' rotate-45 origin-right':''"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <SumMenu :showMenu="showMenu" />
    </div>
</template>

<style scoped lang="scss">

</style>
